LoginSignup
starMagichat
@starMagichat

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

ReactRouterがうまく使えない

Q&A
React

解決したいこと

以前、Qiitaでプログラミングに詳しい人にReactRoutercv6を教えてもらったので、
（その節はお世話になりました。）
それをテストとしてルーティング機能はまだ作っていませんが、作ってみました。

発生している問題・エラー

image.png

該当するソースコード

import './App.css';
import Main from './components/Main';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path='/' index element={<Main />} />
        </Routes>
      </BrowserRouter>

    </>
  );
}

export default App;

自分で試したこと

今回useRefエラーが大量発生していたのですが、全くuseRefを使った覚えがないんですよね..（そもそもフックスを一切使用しようとしていない）
そのため、何かデフォルトでuseRefを使っているのではと思ったのですが、そういう記述は私が探した限りでは見つからなかったのです。
皆様のお力添えいただけると助かります。

参考リンク

Reactは様々なファイルがあり、私が依存関係を一から説明するとわかりずらいと思うので、今回わかりやすくするために、GitHubにリポジトリを上げました。
よろしければ参考にしてください
https://github.com/starmagichat/react-hoshibou

もしかしたら前提知識などが足りず、おかしいことを言っていることもあるかもしれませんが、その時は遠慮なくお申し付けください

0

2Answer

Verclene
@Verclene

このリポジトリで状況再現できますでしょうか.そもそもreact-router-domすらインストールされていないように見えます.
アップロードするファイルを確認してください.

0

Comments

  1. @starMagichat

    Questioner

    ありがとうございます。

    PS C:\Users\starmagichat> npm ls
starmagichat@ C:\Users\starmagichat
`-- react-router-dom@6.23.0

    PowerShellで確認を行いましたが、このようにreact-ruoter-domはインストールされてはいます。
    状況再現というのを行ってみたいのですが、どのように行うかなどはありますか？

  2. @Verclene

    依存関係のインストールは開発しているパッケージに対して行う必要がありますが把握していますか?
    今あなたが見ているのはグローバルにインストールされているものです.

    再現というのは回答者が同じ状態を作れることをそう言っているだけで,特定の操作のことではありません.
    npm周りは何も気をつけずに触っていると(特にパッケージ外でコマンドを叩いてはならない),こういうふうにライブラリが無茶苦茶になって困ったことになります.

  3. @starMagichat

    Questioner

    ありがとうございます。無事成功させることが出来ました！

    import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Main from './Main';
import Sub from './Sub';

function App() {
  return (
    <>
      <div>現在の状態</div>
      <BrowserRouter>
        <Routes>
          <Route path='/' index element={<Main />} />
          <Route path='/sub' index element={<Sub />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

    グローバルでインストールするだけではなく
    開発しているパッケージに対してもパッケージをインストールしなければならないということは
    全く知らなかったので、インストール方法を調べてみてパッケージのルートディレクトリで

    npm install react-router-dom

    を使用し、試行錯誤しながら上記のコードを書いたら無事ルーティング機能が実装できました
    image.png
    ↑拡大している、しっかりと/subと入れるとSub.jsの内容が反映された。
    Reactって色々な知識が必要なのですね。
    様々なこと教えて頂き感謝します。
    ありがとうございました！

  4. @iiokazuya

    基本的にはローカルインストールで開発するのが望ましいです。
    グローバルインストールは、node全体で使うようなパッケージに留めるぐらいですかね。

  5. @starMagichat

    Questioner

    ありがとうございます。
    そうなんですね、てっきりPowerShellなどを使って入れれば、自動でできる仕様なのかと思っていたのですが、ローカルインストールという概念があったことが知れてとてもよかったです。

iiokazuya
@iiokazuya

こちらの記事によるとBrowserRouterはAppを囲うらしいですね、どうでしょうか？

0

Comments

  1. @starMagichat

    Questioner

    回答ありがとうございます
    了解です。イメージ的にはindex.jsはこのような感じですか。

    import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import reportWebVitals from './reportWebVitals';

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Your answer might help someone💌

LoginSign Up

Popular Questions